<template>
  <div>
    <search-bar placeHolder="请输入用户名称"
                @handleSearch="init" />
    <!-- search end -->
    <!-- 表格数据 -->
    <div class="box">
      <v-table :tableData='tableData.data'
               :tableLabel="tableLabel" />
      <!-- 分页器 -->
      <ubi-paging :page.sync="page"
                  :pageSize.sync="pageSize"
                  style="position:absolute;bottom:0;"
                  :pageCount="tableData.last_page" />
    </div>
  </div>
</template>

<script>

import ubiPaging from '@/views/UBI/common/ubi-data-pagination'
export default {
  name: "dispatchList",
  components: {
    ubiPaging
  },
  data () {
    return {
      page: 0,//当前页
      pageSize: 8, //每页显示多少条数据
      searchkey: '', //搜索关键字
      activeDate: '', //选择日期
      tableData: [
        {
          "man": "付大伟",
          "phone": "18333009555",
          "address": "河北省沧州市盐山县",
          "details": "沧乐路新盐中对过，大伟汽修厂",
          "dor": 0,
          "time": "2018-08-31 17:27:42",
          "hair_time": "2019-02-22 11:18:40"
        },
        {
          "man": "付中伟",
          "phone": "18333009555",
          "address": "河北省沧州市盐山县",
          "details": "沧乐路新盐中对过，大伟汽修厂",
          "dor": 0,
          "time": "2018-08-31 17:27:42",
          "hair_time": "2019-02-22 11:18:40"
        }, {
          "man": "付小伟",
          "phone": "18333009555",
          "address": "河北省沧州市盐山县",
          "details": "沧乐路新盐中对过，大伟汽修厂",
          "dor": 0,
          "time": "2018-08-31 17:27:42",
          "hair_time": "2019-02-22 11:18:40"
        }
      ],//表格数据
      tableLabel: [
        {
          label: '收件人',
          prop: 'man'
        },
        {
          label: '联系电话',
          prop: 'phone'
        },
        {
          label: '收货地址',
          prop: 'address'
        },
        {
          label: '支付时间',
          prop: 'time'
        },
        {
          label: '导出时间',
          prop: 'hair_time'
        },
        {
          label: '是否导出',
          EXPORT: true,
          prop: 'status',
          methodName: 'handleExports',
          policyStatus: ["未导出", "已导出"]
        },
      ],//表格数据对应的标题
      loading: false
    }
  },
  methods: {
    async init (search = this.searchkey) {
      this.loading = true;
      const paramsStr = Object.assign(search,{page: this.page,pageSize: this.pageSize})
      let res = await this.api.dispatchList(paramsStr).then(res => res);
      this.tableData = res.data;
      this.loading = false;
    }
  },
  watch: {
    page () {
      this.init()
    },
    pageSize () {
      this.init()
    }
  },
  mounted () {
    this.init()
  }

}
</script>

<style scoped>
.box {
  position:relative;
  min-height:81vh;
  padding-bottom:40px;
  box-sizing:border-box;
}
</style>
